<template>
  <div class="tab-bar-item" @click="itemClick" :style="activeStyle">
    <span :class="iconclass"></span>
    <span class="item-title">{{title}}</span>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",

  data() {
    return {};
  },

  props: {
    iconname: { type: String, default(){ return 'icon-home' } },
    title: { type: String, default() { return '首页' } },
    color: { type: String, default() { return 'pink'}},
    isAcctive: { type: Boolean, default: false},
    activeColor: { type: String, default() { return '#FF8097'}}
  },

  computed: {
    iconclass() {
      return 'item-icon iconfont ' + this.iconname
    },
    activeStyle() { // 判断是否活跃，可以设置单独的活跃颜色
      return this.isAcctive ? 'color: ' + this.activeColor +';' : ''
    }
  },

  methods: {
    itemClick() { // 除了可以判断路由决定active外，还可以在父组件中，监听
      // this.$route.path.params
    }
  },
};
</script>

<style lang="less" scoped>
 @import url('../../../assets/fonts/iconfont.css');

.tab-bar-item {
  display: flex;
  height: 49px; // 49px 375
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  .item-icon {
    flex: 3;
    font-size: 23px;
  }
  .item-title {
    flex: 2;
    font-size: 15px;
  }
}
</style>